<template>
  <div>
    <el-card style="height: calc(100vh - 85px)">
      <div class="header">
        <el-button type="primary" @click="addMore">添加巡检</el-button>
        <el-button type="danger" @click="ClickDele">{{
          isDelete === true ? '确认' : '删除'
        }}</el-button>
      </div>
      <div class="Time">{{ yearDate(b) }}年{{ monthDate(b) }}月</div>
      <div class="main_bofy" v-loading="loading">
        <div style="display: flex">
          <div class="mainBofy_left"></div>
          <div class="mainBofy_right">
            <div class="text title block day">
              <text>巡检类型</text>
              <el-icon color="#409EFC" size="14" @click="addType"
                ><CirclePlus
              /></el-icon>
            </div>
            <div class="block text">
              <div class="day" v-for="item in timeTop" :key="item">
                {{ item }}
              </div>
            </div>
          </div>
        </div>
        <div class="body">
          <div class="body_left">
            <div
              v-for="(item, val, index) in leftMenu"
              :key="index"
              class="lists"
            >
              <div class="lists_left">
                {{ item.name }}
                <el-icon
                  class="deleaa"
                  v-show="isDelete === true"
                  color="#999999"
                  @click="deleteType(item, index)"
                  ><Close
                /></el-icon>
              </div>
              <div class="list">
                <div
                  v-for="(lab, key) in item.chile"
                  :key="key"
                  class="lists_right"
                  :style="{ left: filters(lab.time) + 'rem' }"
                >
                  <el-tooltip placement="top">
                    <template #content>
                      <text
                        v-for="(timea, timeIndex) in lab.time.split(',')"
                        :key="timeIndex"
                        >{{ timea }}</text
                      >
                      <div class="tipAll">
                        <div class="tipAll_left">
                          <div>巡检内容: 风机{{}}</div>
                          <div>巡检人员: 张三、李四{{}}</div>
                          <div>巡检班长: 张思{{}}</div>
                        </div>
                        <div class="tipAll_right">
                          <div>巡检内容: 电路</div>
                          <div>巡检人员: 小王、李四</div>
                          <div>巡检班长: 陈小人</div>
                        </div>
                      </div>
                    </template>
                    <div>
                      <!-- 巡检人{{ lab.polling }},班长{{ lab.monitor }} -->
                      已添加巡检
                      <el-icon color="#fff"><Close /></el-icon>
                    </div>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <add-dialog
      :title="dialogTitle"
      :rowData="curRowData"
      :visible="visibleDialog"
      @onReload="reloadPage"
      @onCloes="onCloes"
    ></add-dialog>
    <more-dialog
      :title="dialogTitle"
      :rowData="curRowData"
      :visible="moreDialog"
      @onReload="morePage"
      @changeTitle="changeTitle"
      @onCloes="moreCloes"
      ref="addmorea"
    >
    </more-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, defineEmits, nextTick } from 'vue'
import { CirclePlus, Close } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import AddDialog from './components/AddDialog/index.vue'
import MoreDialog from './components/AddDialog/add.vue'
import {
  patrolPlan,
  allPointType,
  allType,
  addPatrolType
} from '@/api/patrolScheme'
//数据保存
const emits = defineEmits([])
const addmorea = ref(null)
const dialogTitle = ref('')
const visibleDialog = ref(false)
const moreDialog = ref(false)
const curRowData = ref({})
const loading = ref(true)
const timeTop = ref([])
//显示当前日期
const b = new Date(new Date().getTime())
function yearDate(now) {
  let year = now.getFullYear()
  return year
}
//参数
function monthDate(now) {
  let month = now.getMonth() + 1
  month = month < 10 ? '0' + month : month //月
  return month
}
// 加载中(后期删除)
const loadIng = () => {
  setTimeout(() => {
    loading.value = false
  }, 1000)
}
loadIng()
//左侧菜单
const leftMenu = ref([
  {
    id: 1,
    chile: [
      { polling: '王五', monitor: '张三,李四', time: '7-11,7-16', id: 1 },
      { polling: '王五', monitor: '张三,李四', time: '7-01,7-08', id: 2 },
      { polling: '王五', monitor: '张三,李四', time: '7-19,7-27', id: 3 }
    ]
  },
  {
    id: 2,
    chile: [
      { polling: '王五', monitor: '张三,李四', time: '7-11,7-16', id: 1 },
      { polling: '王五', monitor: '张三,李四', time: '7-02,7-6', id: 2 },
      { polling: '王五', monitor: '张三,李四', time: '7-19,7-27', id: 3 }
    ]
  },
  {
    id: 3,
    chile: [
      { polling: '王五', monitor: '张三,李四', time: '7-11,7-16', id: 1 },
      { polling: '王五', monitor: '张三,李四', time: '7-01,7-8', id: 2 },
      { polling: '王五', monitor: '张三,李四', time: '7-19,7-27', id: 3 }
    ]
  },
  {
    id: 4,
    chile: [
      { polling: '王五', monitor: '张三,李四', time: '7-11,7-16', id: 1 },
      { polling: '王五', monitor: '张三,李四', time: '7-01,7-8', id: 2 },
      { polling: '王五', monitor: '张三,李四', time: '7-19,7-27', id: 3 }
    ]
  }
])
//右侧日期
let date = new Date()
let month = date.getMonth()
const getEveryDay = (date, month) => {
  //设置月份
  date.setMonth(month + 1)
  date.setDate(0)
  let dayArry = []
  //获取月份的某一天
  let day = date.getDate()
  for (let i = 1; i <= day; i++) {
    const currentDate = new Date(
      date.getTime() - (day - i) * 24 * 60 * 60 * 1000
    )
    dayArry.push(i + '日' + getWeekday(currentDate.getDay()))
  }
  timeTop.value = dayArry
}
const getWeekday = (day) => {
  return ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][day]
}
getEveryDay(date, month)
//巡检类型
const allTypeList = async () => {
  const res = await allType()
  for (let i = 0; i < leftMenu.value.length; i++) {
    for (let j = 0; j < res.length; j++) {
      if (i === j) {
        leftMenu.value[i].name = res[j]
      }
    }
  }
}
allTypeList()
//根据巡检类型分组查询所有巡检计划表
const patrolMonth = ref(yearDate(b) + ' - ' + monthDate(b))
let one = patrolMonth.value.replace(' ', '')
let two = one.replace(' ', '')
const patrolPlanType = async (data) => {
  const res = await patrolPlan(data)
}
patrolPlanType(two)
// 添加巡检类型addType
const addType = () => {
  dialogTitle.value = '新增类型'
  visibleDialog.value = true
  // curRowData.value = {}
  const addPatrolTypeList = async () => {
    const res = await addPatrolType()
    console.log('res-------', res)
  }
}
const onCloes = () => {
  visibleDialog.value = false
  moreDialog.value = false
  curRowData.value = {}
}
const reloadPage = () => {
  visibleDialog.value = false
}
//点击了添加按钮
const addMore = async () => {
  nextTick(() => {
    dialogTitle.value = '新增巡检计划'
    moreDialog.value = true
    addmorea.value.cleara()
    addmorea.value.allTypeList()
  })
}
const morePage = () => {
  moreDialog.value = false
}
const changeTitle = (data) => {
  console.log('data', data)
  data === true
    ? (dialogTitle.value = '新增巡检计划')
    : (dialogTitle.value = '选择巡检类型')
}
const moreCloes = () => {
  moreDialog.value = false
  curRowData.value = {}
}
//点击了删除按钮
const isDelete = ref(false)
//廊内巡检
const selectIndex = (options) => {
  console.log('options', options)
}
//点击了删除按钮
const ClickDele = () => {
  isDelete.value = !isDelete.value
}
//点击了删除标签
const deleteType = (item, index) => {
  ElMessageBox.confirm('确定删除此类型吗?', '删除类型', {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  })
    .then(() => {
      // 删除
      loading.value = true
      leftMenu.value.splice(index, 1)
      loadIng()
    })
    .catch(() => {
      // catch error
    })
}
const filters = (data) => {
  let arr = data.split(',')
  let order = arr[0].substring(arr[0].length - 2) - 1
  let num = order * 150 + order * 2 //计算距离一号的位置不带marigin-right
  return num / 32
}
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
}
.Time {
  text-align: center;
  margin: 10px 0px;
  font-size: 18px;
  font-weight: bold;
  color: #333333;
}
.main_bofy {
  height: 100%;
  margin-top: 20px;
  white-space: nowrap;
  overflow-x: auto;
}
.mainBofy_right {
  display: flex;
}
.mainBofy_left {
  width: 220px;
  font-size: 14px;
  color: #333333;
}
.title {
  background: #e4edff;
  border-radius: 2px 2px 2px 2px;
}
.delete {
  position: absolute;
  top: calc(50% - 10px);
  right: 30px;
}
.block {
  text-align: center;
  height: 60px;
  line-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.body {
  display: flex;
  width: 100%;
  .body_left {
  }
}

.list {
  height: 60px;
  line-height: 60px;
  border-bottom: 0.03125rem solid #d7d7d7;
  display: flex;
}
.border {
  border-bottom: 1px solid #d7d7d7;
}
.day {
  background: #e4edff;
  border-radius: 2px 2px 2px 2px;
  width: 150px;
  margin-right: 2px;
}
.text {
  font-size: 14px;
  color: #333333;
}
.leftMenu {
  width: 150px;
  margin-right: 2px;
}
.lists {
  display: flex;
  border-bottom: 1px solid #d7d7d7;
  .list {
    display: flex;
    position: relative;
    text-align: center;
  }
  .lists_left {
    height: 60px;
    color: #333333;
    font-size: 14px;
    width: 150px;
    text-align: center;
    line-height: 60px;
    position: relative;
  }
  .lists_right {
    width: 150px;
    margin-right: 20px;
    height: 100%;
    background: #517ee8;
    color: #fff;
    font-size: 14px;
    position: absolute;
  }
  .deleaa {
    position: absolute;
    top: calc(50% - 10px);
    right: 0px;
  }
}
.tipAll {
  display: flex;
  justify-content: space-between;
  .tipAll_left {
  }
  .tipAll_right {
  }
}
</style>
